<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 用户列表 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- 筛选表单 start -->
            <div class="handle-box">
                <!-- 请假类型： -->
                请假类型：<el-select v-model="leaveVO.leave.type" placeholder="请假类型" class="handle-select mr10">
                    <el-option key="0" label="全部" value=""></el-option>
                    <el-option key="1" label="事假" value="事假"></el-option>
                    <el-option key="2" label="病假" value="病假"></el-option>
                </el-select>
                <!-- 请假状态： -->
                请假状态：<el-select v-model="leaveVO.leave.status" placeholder="请假状态" class="handle-select mr10">
                    <el-option key="" label="全部" value=""></el-option>
                    <el-option key="0" label="待审核" value="0"></el-option>
                    <el-option key="1" label="待确认" value="1"></el-option>
                    <el-option key="2" label="已通过" value="2"></el-option>
                    <el-option key="3" label="已取消" value="3"></el-option>
                </el-select>
                <!-- 学生 -->
                学生姓名：<el-input v-model="leaveVO.leave.studentName" placeholder="姓名" class="handle-input mr10">
                </el-input>


                <!-- 选择班级： -->
                选择班级：<el-select placeholder="选择班级" v-model="leaveVO.leave.klassId" class="handle-select mr10">
                    <el-option key="" label="全部" value=""></el-option>
                    <el-option v-for="(klass, index) in klassList" :key="klass.id" :label="klass.name"
                        :value="klass.id">
                    </el-option>
                </el-select>

                <!-- 请假时间 -->
                选择时间：<el-date-picker v-model="sendTime" type="daterange" align="right" class="mr10" unlink-panels
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>

                <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                <el-button type="info" icon="el-icon-refresh" @click="handleReset">重置</el-button>
            </div>
            <!-- 筛选表单 end -->

            <!-- 表格数据 start -->
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
                stripe>
                ​​​​​​​<el-table-column property="sid" show-overflow-tooltip label="序号" width="55" align="center">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="studentName" label="请假学生" width="150" align="center"></el-table-column>
                <el-table-column prop="klassName" label="年级班级" width="150" align="center"></el-table-column>

                <el-table-column prop="type" label="请假类型" width="150" align="center"></el-table-column>
                <el-table-column prop="startTime,finishTime" label="请假时间" width="400" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.startTime }}:00 至 {{ scope.row.finishTime }}:00
                    </template>
                </el-table-column>


                <el-table-column prop="text" label="请假事由" width="300" align="center" :show-overflow-tooltip="true">
                </el-table-column>


                <el-table-column prop="sendTime" label="发起时间" align="center">
                </el-table-column>

                <el-table-column prop="type" label="请假状态" align="center" width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status === '0'" type="danger">待审核</el-tag>
                        <el-tag v-else-if="scope.row.status === '1'" type="warning">待确认</el-tag>
                        <el-tag v-else-if="scope.row.status === '2'" type="success">已通过</el-tag>
                        <el-tag v-else type="info">已取消</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-view" @click="showDrawer(scope.row)">查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 表格数据 end -->

            <!-- 分页区 start -->

            <div class="block">
                <el-pagination @current-change="handleCurrentChange" :current-page.sync="leaveVO.pageNum" :page-size="3"
                    layout="prev, pager, next, jumper" :page-count="totalPages">
                </el-pagination>
            </div>
            <!-- 分页区 end -->


            <!-- 查看请假详情 -->
            <div style="padding-left:50px">
                <el-drawer title="查看请假详情" :visible.sync="drawer" :direction="direction" destroy-on-close>
                    <div class="text-div">
                        <span class="title-text">{{ leave.studentName }} / {{ leave.klassName }}</span>
                    </div>
                    <div class="text-div">
                        <span class="subtitle-text">发起时间：</span> <span class="context-text">{{ leave.sendTime }}</span>
                    </div>
                    <div class="text-div">
                        <span class="subtitle-text">请假类型：</span> <span class="context-text">{{ leave.type }}</span>
                    </div>
                    <div class="text-div">
                        <span class="subtitle-text">请假时间：</span> <span class="context-text">{{ leave.startTime
                        }}:00 至 {{ leave.finishTime }}:00</span>
                    </div>
                    <div class="text-div">
                        <span class="subtitle-text">请假事由：</span> <span class="context-text">{{ leave.text }}</span>
                    </div>

                    <div class="text-div">
                        <span class="subtitle-text">审批流程：</span>
                    </div>
                    <div style="height: 300px;margin-left: 40px;">
                        <el-steps direction="vertical" :active=active>
                            <el-step title="发起请假">{{ leave.parentName }}</el-step>
                            <el-step :title=klassMaster :description=authDesc>{{ klassMaster }}</el-step>
                            <el-step :title=this.parentName :description=checkDesc>{{ leave.parentName }}</el-step>
                            <el-step title="已完成" icon="el-icon-success">{{ leave.parentName }}</el-step>
                        </el-steps>
                    </div>
                </el-drawer>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    inject: ['reload'],  //注入依赖
    name: 'basetable',
    data() {
        return {
            leaveVO: {
                leave: {
                    type: "",
                    status: "",
                    studentName: "",
                    klassId: ''
                },
                pageNum: 1,
                pageSize: 10,
                startSendTime: "",
                endSendTime: "",
                kids: []
            },
            leave: {

            },
            totalPages: 0,
            tableData: [],
            klassList: [],
            editVisible: false,
            form: {},
            idx: -1,
            id: -1,

            pickerOptions: {
                shortcuts: [
                    {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            sendTime: [],

            drawer: false,
            direction: 'rtl',
            active: 0,
            klassMaster: "班主任审核：杨老师",
            authDesc: "",
            parentName: "",
            checkDesc: "",
        };
    },

    created() {
        this.getData();
    },

    methods: {
        // 获取 userList 数据
        getData() {
            console.log("参数：", this.leaveVO)
            this.$axios.post('/leave/admin/list', this.leaveVO).then((r) => {
                this.tableData = r.data.data.data;
                console.log(r);
                this.totalPages = r.data.data.totalPages;
                console.log(this.totalPages);
                this.getKlassList();
            });
        },
        // 查询班级信息
        getKlassList() {
            this.leaveVO.kids.leanth = 0;
            this.$axios.get("/manage/admin/klass/getKlassByManagerId/" + localStorage.getItem("userid")).then(r => {
                this.klassList = r.data.data;
                for (let klass of this.klassList) {
                    this.leaveVO.kids.push(klass.id);
                }
                console.log("klassList:", this.klassList);
            })
        },
        handleSearch() {
            if (this.sendTime != null) {
                this.leaveVO.startSendTime = this.sendTime[0];
                this.leaveVO.endSendTime = this.sendTime[1];
            }
            this.getData();
        },
        handleReset() { this.reload() },
        // 锁定或解锁操作，管理员仅可作此二者操作，权力不能太大吧
        handleStatus(index, row, status) {
            if (row.status == status) {
                if (row.status == 'n') {
                    this.$message.warning('该用户已被锁定，且勿重复操作');
                } else {
                    this.$message.warning('该用户状态正常，且勿重复操作');
                }
                return;
            }
            // 二次确认删除
            let confMsg = status == 'n' ? '确定要锁定用户' : '确定要解锁用户';
            this.$confirm(confMsg + '  " ' + row.nick + ' "  吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$axios.get('/admin/user/updateStatus', { params: { id: row.id, status: status } }).then((r) => {
                        if (r.data.code == 200) {
                            this.$message.success(status == 'n' ? '锁定成功' : '解锁成功');
                            row.status = status;
                        } else {
                            this.$message.warning('操作失败，请稍候再试');
                        }
                    });
                })
                .catch(() => { });
        },
        showDrawer(row) {
            this.drawer = true;
            this.leave = row;
            this.authDesc = this.leave.authTime ? ("已同意：" + this.leave.authTime) : "待审核";
            this.parentName = "家长确认：" + row.parentName;
            this.checkDesc = this.leave.checkTime ? ("已确认：" + this.leave.authTime) : "待确认";
            this.active = parseInt(this.leave.status) + 2;
            // if (this.leave.status == 2) {
            //     this.active = 4;
            // }
            console.log(this.leave);
        },

        // 分页导航
        handleCurrentChange(pageNum) {
            this.leaveVO.pageNum = pageNum;
            this.getData();
            console.log(`当前页: ${pageNum}`);
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

.text-div {
    margin: 30px;
}

.title-text {
    font-size: 30px;
    font-family: sans-serif;
    font-weight: bolder;
    margin-left: 20px;
    margin-bottom: 20px;
}

.subtitle-text {
    font-size: 15px;
    font-weight: bolder;
    font-family: sans-serif;

    margin-left: 20px;

}

.context-text {
    font-size: 15px;
    font-family: sans-serif;
    position: absolute;
}

.little-text {
    font-size: 10px;
    font-family: sans-serif;
}
</style>
